<template>
  <div>
    <div class="top   s-d-flex">
      <div class="flex-1 mr23">
        <div
          class="img img01 pt37 pl25"
          @click="
            handleGoTo(
              userInfo.type == 'admin'
                ? '/medicalWasteAdmin/retrospect'
                : '/medicalWaste/retrospect'
            )
          "
        >
          <div class="title fz20">医废总量(kg)</div>
          <div class="num fz32 pt21 ff">
            {{ attr.weightSum ? attr.weightSum : 0 }}
          </div>
        </div>
      </div>
      <div class="flex-1 mr23">
        <div
          class="img img02 pt37 pl25"
          @click="handleGoTo('/alarmInfo/alarmRecord')"
        >
          <div class="title fz20">预警总数</div>
          <div class="num fz32 pt21 ff">
            {{ attr.warnCount ? attr.warnCount : 0 }}
          </div>
        </div>
      </div>
      <div class="flex-1 mr23" v-if="userInfo.type == 'admin'">
        <div
          class="img img05 pt37 pl25"
          @click="handleGoTo1('/hospitalInstitutions/index')"
        >
          <div class="title fz20">医院数量</div>
          <div class="num fz32 pt21 ff">
            {{ attr.hospitalCount ? attr.hospitalCount : 0 }}
          </div>
        </div>
      </div>
      <div class="flex-1 mr23">
        <div
          class="img img03 pt37 pl25"
          @click="handleGoTo('/basicData/personnel')"
        >
          <div class="title fz20">转运人员</div>
          <div class="num fz32 pt21 ff">
            {{ attr.collectStaffCount ? attr.collectStaffCount : 0 }}
          </div>
        </div>
      </div>
      <div class="flex-1">
        <div
          class="img img04 pt37 pl25"
          @click="handleGoTo('/basicData/personnel')"
        >
          <div class="title fz20">医护人员</div>
          <div class="num fz32 pt21 ff">
            {{ attr.handStaffCount ? attr.handStaffCount : 0 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as statisticsApi from "@/api/statistics";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { getUserInfo } from "@/utils/auth";
export default {
  setup() {
    // 用户
    const userInfo = reactive(getUserInfo() ? JSON.parse(getUserInfo()) : {});
    const dataForm = reactive({attr:{
      weightSum: "0",
      // 预警总数
      warnCount: "0",
      // 转运人员
      collectStaffCount: "0",
      // 医护人员
      handStaffCount: "0",
      // 医院数量
      hospitalCount: "0",
    }});
    const handleInit = async () => {
      const result = await statisticsApi.wasteBaseSituation();
      console.log(1);
      console.log(result);
      statisticsApi.wasteBaseSituation().then((res) => {
        console.log(11);
        console.log(res);
        if (res && res.success) {
          dataForm.attr = res.data

        }
      });
    };
    onMounted(() => {
      handleInit();
    });
    return {
      userInfo,
      ...toRefs(dataForm),
      handleInit,
    };
  },
};
</script>
<style lang="scss" scoped>
.img {
  height: 180px;
  color: #fff;
}
.img01 {
  background: url("../../../assets/img01.png") no-repeat center center;
  background-size: 100% 100%;
}
.img02 {
  background: url("../../../assets/img02.png") no-repeat center center;
  background-size: 100% 100%;
}
.img03 {
  background: url("../../../assets/img03.png") no-repeat center center;
  background-size: 100% 100%;
}
.img04 {
  background: url("../../../assets/img04.png") no-repeat center center;
  background-size: 100% 100%;
}
.img05 {
  background: url("../../../assets/img05.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>